<template>
    <div id="downTools">
        <search-title></search-title>
        <loading v-if="!sortTitle" loadingStyle="height: 700px"></loading>
        <section v-else class="wrap aboutMe">
            <template>
                <div class="allSort">全部分类</div>
            <el-tabs :tab-position="tabPosition" v-model="activeName" @tab-click="handleClick">
                <el-tab-pane v-for="item in sortTitle" :label="item.catname" :key="item.id" :name="item.catname" :lazy="true">
                    <down-List @listHide="listHideParent" v-if="downListMsg" :titleName="item.catname" :listAll="listMsg"></down-List>
                    <down-Msg v-else :itemInfo="itemMsg" :msgShow="msgHide"></down-Msg>
                </el-tab-pane>
                <!-- <el-tab-pane label="Auto 3dmax" name="3dmax" :lazy="true">
                    <down-List v-if="downListMsg" titleName="Auto 3dmax"></down-List>
                    <down-Msg v-else></down-Msg>
                </el-tab-pane>
                <el-tab-pane label="Auto Cad" name="Cad" :lazy="true">
                    <down-List v-if="downListMsg" titleName="Auto Cad"></down-List>
                    <down-Msg v-else></down-Msg>
                </el-tab-pane>
                <el-tab-pane label="Vray4.0 for 3dmax" name="Vray4.0" :lazy="true">
                    <down-List v-if="downListMsg" titleName="Vray4.0 for 3dmax"></down-List>
                    <down-Msg v-else></down-Msg>
                </el-tab-pane>
                <el-tab-pane label="SketchUp" name="SketchUp" :lazy="true">
                    <down-List v-if="downListMsg" titleName="SketchUp"></down-List>
                    <down-Msg v-else></down-Msg>
                </el-tab-pane>
                <el-tab-pane label="Adobe After Effects" name="Effects" :lazy="true">
                    <down-List v-if="downListMsg" titleName="Adobe After Effects"></down-List>
                    <down-Msg v-else></down-Msg>
                </el-tab-pane> -->
            </el-tabs>
            </template>
        </section>
        
    </div>
</template>
<script>
import loading from '../loading'
export default {
    name: 'downTools',
    data () {
        return {
            msg : '关于我们',
            tabPosition: 'left',
            activeName: '',
            title : "官方正版免费下载",
            keyWordsContent:"",
            descriptionContent:"",
            years : '',
            downListMsg : true,//显示列表或详情页
            sortTitle : null,//右侧标题
            listMsg : null,//列表信息
            itemMsg : null,//详情信息
            msgHide : true,
        }
    },
    methods:{
        handleClick(tab,event){
            this.$router.push({path:'/downTools',query:{downToolsName:tab.name}})
            this.downListMsg = true;
            this.msgHide = true;
            axios.get("/applist/"+this.sortTitle[tab.index].id+"/getItems").then(response=>{
                this.listMsg = response.data.apps;//列表内容
            })
            this.title = tab.label+'_官方正版免费下载';
            this.descriptionContent = this.title+'最新版，'+this.years+this.title+'官方版免费下载。集设网为您提供各种版本的'+this.title+'官方正版下载，以及'+this.title+'安装说明';//描述
            this.keyWordsContent = this.title+'最新版_'+this.years+this.title+'官方版免费下载'
            console.log(tab.label)
        },
        listHideParent(id){
            this.downListMsg = false;//隐藏列表显示详情
            axios.get("/appinfo/"+id+"/getinfo").then(response=>{
                this.itemMsg = response.data.data;//详情信息
                this.msgHide = false;//详情页的loading
            })
        }
    },
    components:{
        loading,
        downList: resolve => require(["./downChild/downList"], resolve),//下载列表
        downMsg: resolve => require(["./downChild/downMsg"], resolve),//下载列表
        searchTitle:resolve => require(["../searchTitle/searchTitle"], resolve),//吊顶
    },
    created () {
         var date=new Date;
        this.years=date.getFullYear(); 
        if(this.$route.query.downItemId){
            this.listHideParent(this.$route.query.downItemId);
        };
        axios.get("/applist/0/getItems").then(response=>{
            this.sortTitle = response.data.cats;//右侧标题
            this.listMsg = response.data.apps;//列表内容
            this.activeName = this.$route.query.downToolsName||this.sortTitle[0].catname;
            this.title = (this.$route.query.downToolsName||this.sortTitle[0].catname)+'_官方正版免费下载';
            this.descriptionContent = this.title+'最新版，'+this.years+this.title+'官方版免费下载。集设网为您提供各种版本的'+this.title+'官方正版下载，以及'+this.title+'安装说明';//描述
            this.keyWordsContent = this.title+'最新版_'+this.years+this.title+'官方版免费下载'
        })
    },
     metaInfo () {
      return {
        title: this.title,
        meta: [
            {                 // set meta
                name: 'keyWords',
                content: this.keyWordsContent
            },
            {                 // set meta
                name: 'description',
                content: this.descriptionContent
            }
        ]
      }
    },
}
</script>
<style>
    #downTools .aboutMe{
        padding-top:71px;
        margin-top: 15px;
        margin-bottom: 33px;
        position:relative;
    }
    .aboutMe .el-tabs__header{
        width: 270px;
        height: 185px;
        background: #fff!important;
        text-align: left!important;
        padding-top: 4px;
    }
    
    
    #downTools .el-tabs--left .el-tabs__item.is-left{
        text-align: left;
        border-left: 2px solid transparent;
        font-weight: bold;
    }
    .aboutMe .is-active{
        border-left: 2px solid #ea514b!important;
    }
    .el-tabs__item{
        line-height: 46px;
        height: 46px;
        padding: 0 25px;
    }
    .el-tabs__item.is-active{
        color: #ea514b!important;
    }
    .el-tabs--left .el-tabs__active-bar.is-left, .el-tabs--left .el-tabs__nav-wrap.is-left::after{
        left:0;
        
    }
   .el-tabs__nav-scroll .el-tabs__item:hover{
        color: #fff!important;
        border-left: 2px solid #ea514b!important;
        background: #ea514b!important;
    }
    .el-tabs__nav-wrap::after{
        background: transparent;
    }
    .el-tabs__active-bar{
        display: none;
    }
    .el-tabs--left .el-tabs__header.is-left{
        margin-right: 15px;
    }
    .allSort{
        position: absolute;
        top:71px;
        left: 0px;
        width: 270px;
        font-size: 14px;
        line-height: 46px;
        color: #303133;
        text-align: center;
        font-weight: bold;
        z-index: 9;
        background: #fff;
        border-bottom: 1px solid #ddd;
        padding-top: 10px;
    }
    #downTools .el-tabs__header{
        padding-top: 56px;
    }
</style>